<template>
	<view class="device">
		<uni-nav-bar dark :fixed="true" color="#000" :border="false" background-color="#fff" status-bar
			:title="$t('tabBar.device')" />
		<view v-if="deviceList.length" class="wrap">
			<view>{{$t('home.Device-added')}}({{deviceList.length}})</view>
			<view class="item-box">
				<view class="item" v-bind:class="item.color"
					@click="config.path('/pagesA/device/manageDevice/manageDevice?sn='+item.sn)"
					v-for="(item,index) in deviceList" :key="index">
					<view class="title">{{item.deviceName || item.sn}}</view>
					<view class="flex_2">
						<!-- <image style="width:120rpx;height: 300rpx;margin: 30rpx 0 40rpx;"
							:src="item.modelId==4?'/static/image/1.png':'/static/image/2.png'" mode="">
						</image> -->
						<image style="width:130rpx;height: 320rpx;margin: 20rpx 0 30rpx;"
							:src="item.modelId==4?'/static/image/1.png':'/static/image/2.png'" mode="">
						</image>
					</view>
					<view class="flex_s">
						<image style="width:28rpx;height: 26rpx;" src="/static/image/icon-sz.png"></image>
						<view v-bind:class="item.color">•&nbsp;{{getStatus(item.entiretyStatus)}}</view>
					</view>
					<!-- 异常 -->
					<image v-if="item.deviceAlarmList.length" class="abnormal" src="/static/image/abnormal.png"
						@tap.stop="handleClickPop(item.sn)"></image>
					<!-- 升级失败 -->
					<image v-if="item.updateStatus==2" class="upgrade-failed" src="/static/image/gz.png"
						@tap.stop="upgradeFailed(item.sn)"></image>
					<!-- 设备故障 -->
					<image v-if="item.faultStatus==2||item.faultStatus==4||item.faultStatus==6||item.faultStatus==7"
						class="upgrade-err" src="/static/image/err.png" @tap.stop="upgradeErr(item.faultStatusName)">
					</image>

					<!-- 预约 -->
					<image v-if="item.scheduleTaskList.length" class="yueyu" src="/static/image/yuyue.png"
						@tap.stop="toYuyue(item.sn)"></image>
				</view>
			</view>
			<!-- 添加按钮 -->
			<view class="flex_1 add-device" style="width: 100%;"
				@click="config.path('/pagesA/device/addDevice/addDevice')">
				<image src="/static/image/add-device.png"></image>
			</view>
		</view>
		<!-- 空数据 -->
		<view v-else class="empty">
			<view class="color_9 text_center">{{$t('home.No-available-devices')}}</view>
			<view class="btn flex_col_center marg_auto" @click="config.path('/pagesA/device/addDevice/addDevice')">
				{{$t('home.Go-add')}}
			</view>
		</view>

		<waring-pop ref="WaringPop" @confirm="handleErrorConfirm" :alarms="popupAlarmdata"></waring-pop>
		<popup-success ref="upgradeFailed" url="/static/image/icon-error.png" :title="$t('otcErr')"
			@confirm="getUpgradeFailed" @retry="retry" :show="true"></popup-success>

		<popup-success ref="upgradeErr" url="/static/image/icon-error.png" :title="faultStatusName"
			@confirm="getUpgradeFailed" @retry="retry"></popup-success>
	</view>
</template>

<script>
	import {
		deviceList,
		deviceAbnormal,
		updateBySn
	} from '@/api/device.js'
	import WaringPop from '@/componets/WaringPop.vue';
	import PopupSuccess from '@/componets/PopupSuccess.vue';
	export default {
		components: {
			WaringPop,
			PopupSuccess
		},
		data() {
			return {
				isList: true, //是否有数据		
				deviceList: [], //设备列表
				deviceListLenth: 0, //设备数量
				popupAlarmdata: [], //异常弹窗
				timer: null, //定时器
				sn: '',
				faultStatusName: ''
			};
		},
		onShow() {
			let token = uni.getStorageSync('token');
			if (token) {
				this.getDeviceList(); //获取设备列表
				this.timer = setInterval(() => {
					this.getDeviceList(); //获取设备列表
				}, 5000)
			}

		},
		onLoad() {

		},
		onHide() {
			clearInterval(this.timer)
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			// 判断中英文
			getStatus(status) {
				switch (status) {
					case '在线':
						return this.$t('on.line')
						break
					case '离线':
						return this.$t('offline')
						break
					case '升级中':
						return this.$t('upgrading')
						break
					default:
						return this.$t('fault')
				}
			},
			// 获取设备列表
			getDeviceList() {
				deviceList().then((r) => {
					let res = r.data
					res.forEach((item) => {
						if (item.entiretyStatus === '在线' && item.status == 1) {
							item.color = 'color_green';
						} else if (item.entiretyStatus === '离线' && item.status == 0) {
							item.color = 'color_gray';
						} else if (item.entiretyStatus !== '离线' || item.entiretyStatus !== '在线') {
							item.color = 'color_orange';
						}
					});
					console.log('res==', res)
					this.deviceList = res;
				});
			},
			handleErrorConfirm() {
				// 这里添加你想要执行的代码
				console.log('知道了');
			},
			//OTc升级失败联系客服
			getUpgradeFailed() {

			},
			retry() {
				updateBySn({
					sn: this.sn,
				}).then((r) => {
					console.log(r, 'kkkk')
					if (r.code === 0) {
						this.config.Toast(this.$t('pleaseWait'))
					} else {
						this.config.Toast(r.message)
					}
				});
			},
			// 设备异常弹窗
			handleClickPop(sn) {
				this.$refs.WaringPop.open();
				deviceAbnormal({
					sn: sn
				}).then((r) => {
					console.log('设备异常弹窗数据==', r)
					if (r.code === 0) {
						this.popupAlarmdata = r.data
					}
				});
			},
			// OTC升级失败弹窗
			upgradeFailed(sn) {
				this.sn = sn
				this.$refs.upgradeFailed.open();
			},
			// 故障弹窗
			upgradeErr(faultStatusName) {
				this.faultStatusName = faultStatusName
				this.$refs.upgradeErr.open();
			},
			// 预约
			toYuyue(sn) {
				this.config.path('/pagesA/device/reservationDevice/reservationDevice?sn=' + sn)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.device {
		.wrap {
			width: 90%;
			margin: auto;
			padding-top: 30rpx;

			.item-box {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 30rpx;

				.item {
					width: 313rpx;
					height: 530rpx;
					padding: 10rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					border-radius: 10rpx;
					border: 5px solid #7BE1A8;
					margin-bottom: 36rpx;
					position: relative;

					.title {
						color: #000000;
						font-size: 28rpx;
						font-weight: bold;
						height: 80rpx;
					}

					.abnormal {
						width: 103rpx;
						height: 77rpx;
						position: absolute;
						left: 10rpx;
						top: 130rpx;
					}

					.upgrade-failed {
						width: 103rpx;
						height: 77rpx;
						position: absolute;
						left: 10rpx;
						top: 230rpx;
					}

					.upgrade-err {
						width: 103rpx;
						height: 77rpx;
						position: absolute;
						left: 10rpx;
						top: 330rpx;
					}

					.yueyu {
						width: 62rpx;
						height: 62rpx;
						position: absolute;
						top: 130rpx;
						right: 25rpx;
					}
				}

				.color_green {
					border-color: #7BE1A8;
					color: #7BE1A8;
				}

				.color_orange {
					border-color: #FFA027;
					color: #FFA027;
				}

				.color_gray {
					border-color: #999999;
					color: #999999;
				}
			}

			.add-device {
				position: fixed;
				left: 50%;
				bottom: 30rpx;
				transform: translateX(-50%);
				text-align: center;
				width: 100%;

				image {
					width: 106rpx;
					height: 106rpx;
				}
			}
		}

		.empty {
			font-size: 30rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.btn {
				margin-top: 48rpx;
				width: 406rpx;
				height: 89rpx;
				background: $uni-theme-color;
				border-radius: 10rpx;
				color: #fff;
			}
		}
	}
</style>